<template>
  <div class="finish-com15">
    <div ref="chartContainer" style="width: 500px; height: 260px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: ['crowded'],
  data() {
    return {
      data1: [], // 景点名称
      data2: [], // 拥挤程度百分比
      totalData: [] // 景点承载人数
    }
  },
  watch: {
    crowded(val) {
      this.fetchData(val);
    }
  },
  mounted() {
    this.fetchData(this.crowded);
  },
  methods: {
    fetchData(sceneryId) {
      this.$axios.post('/api/forewarning/congestionWarningBySite', { scenery_id: sceneryId })
        .then(response => {
          const { data } = response.data;
          this.data1 = data.name_date;
          this.data2 = data.percent_date.map(percent => parseFloat(percent.replace('%', ''))); // 转换成数字
          this.totalData = data.total_data;
          this.updateChart();
        })
        .catch(error => {
          console.error('Failed to fetch data:', error);
        });
    },
    updateChart() {
      const chartBox = echarts.init(this.$refs.chartContainer);
      const colors = ["#4AC29A", "#BDFFF3", "#B2FEFA", "#0ED2F7", "#30E8BF"];

      const option = {
        title: {
          text: '景区各景点人数',
          textStyle: {
            color: '#fff',
            fontSize: 18,
          }
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}：<br/>{a0}: {c0}%<br/>{a1}: {c1}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          show: false //不显示x轴相关信息
        },
        yAxis: {
          type: 'category',
          data: this.data1,
          axisTick: { show: false }, //不显示刻度线
          axisLabel: {
            fontSize: 18,
            color: "#fff"
          },
          axisLine: {
            show: false
          },
          inverse: true
        },
        series: [
          {
            name: '景点拥挤程度',
            type: 'bar',
            data: this.data2,
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: function (params) {
                  var num = colors.length;
                  return colors[params.dataIndex % num]
                }
              }
            },
            barCategoryGap: 5,
            barWidth: 20,
            label: {
              show: true,
              position: "inside",
              formatter: "{c}%"
            }
          },
          {
            name: '景点承载人数',
            type: 'bar',
            data: this.totalData,
            barCategoryGap: 5,
            barWidth: 20,
            itemStyle: {
              color: "none", //填充色
              borderColor: "rgba(0,0,0,.0)",
              borderWidth: 2,
              barBorderRadius: 15
            }
          }
        ]
      };

      chartBox.setOption(option);
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.finish-com15 {
  color: rgba(108, 68, 240, 0.4);
}
</style>
